<?php echo $this->Html->css('admin/admin_organisations_index'); ?>
<style>
    .big_group {
        border: solid #ccc 1px;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 1px 1px 4px #ccc;
        display: block;
        height: 350px;
    }

    .groups_list {
        display: table;
        width: 100%;
    }
    .groups_list, .groups_list ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    .groups_list ul {
        overflow: auto;
        height: 250px;
    }

    .groups_list ul li {
        padding: 3px;
        overflow: hidden;
    }

    .groups_list ul li:hover {
        background-color: #f9f9f9;
    }

    .groups_list ul li.selected {
        background-color: #f9f9f9;
    }

    .groups_list .category_name {
        font-weight: bold;
        padding: 4px;
        width: 70%;
        cursor: pointer;
    }

    .groups_list .group_name, .groups_list .date_name {
        padding: 4px;
        cursor: pointer;
        width: 78%;
    }

    .groups_list .editable {
        border: solid #eee 2px;
        box-shadow: inset -1px -1px 3px #f9f9f9;
        padding: 2px;
        border-radius: 4px;
        background-color: #fff;
    }

    .groups_list .disabled {
        color: #f5f5f5;
        text-shadow: 0px 1px 1px #fafafa;
    }

    .groups_list .options {
        text-align: right;
        padding: 3px;
    }

    .groups_list .options a {
        color: #0088cc;
        text-decoration: none;
        padding: 5px;
    }

    .groups_list .column {
        display: table-cell;
        min-height: 200px;
        border-right: solid #f8f8f8 1px;
    }

    /*    .groups_list .column:not(:last-child) {
            border-right: solid #f8f8f8 1px;
        }*/

    .groups_list .column header {
        border-bottom: solid #f8f8f8 1px;
        overflow: hidden;
        vertical-align: middle;
        padding: 0px 4px;
        box-sizing: border-box;
    }

    .groups_list .column header h5 {

    }

    .groups_list .column header .btn {
        margin-top: 5px;
    }

    .groups_list .options a.remove-link {
        color: red;
    }
</style>

<div class="" id="container">

    <div class="row">
        <div class='col-lg-12'>

            <div class="panel">

                <div id="groups_block" class="panel-body">

                    <div class="col-lg-12">
                        <h4>Small Groups</h4>

                        <p class="alert alert-info">
                            Click on a Group name on the left to load the subgroups under it. 
                            <b>Double-Click</b> on the Group or Subgroup name to edit it.
                            Click on the <i class="fa fa-plus-square"></i> icons to add Groups and Subgroups.
                        </p> 

                        <section id="groups_list" class="groups_list" data-url="<?php echo $this->Html->url(array('controller' => 'organisation', 'action' => 'org_groups')); ?>">
                            <div class="col-lg-3 column">
                                <header>
                                    <h5 class="pull-left">Group Types</h5>
                                    <button class="btn btn-xs pull-right" id="add_category"><i class="fa fa-plus"></i></button>
                                </header>

                                <ul id="categories">
                                    <?php foreach ($categories as $category) { ?>
                                        <li style="overflow: hidden;">
                                            <div class="category_name pull-left" data-id="<?php echo $category['OrganisationGroupType']['id']; ?>">
                                                <?php echo $category['OrganisationGroupType']['name']; ?>
                                            </div>

                                            <div class="options pull-right">
                                                <a href="#" class="remove-link" data-id="<?php echo $category['OrganisationGroupType']['id']; ?>">
                                                    <i class="fa fa-trash-o"></i>
                                                </a>

                                                <i class="fa fa-angle-right"></i>
                                            </div>
                                        </li>
                                    <?php } ?>
                                </ul>
                            </div>

                            <div class="col-lg-4 column">
                                <header>
                                    <h5 class="pull-left">Groups</h5>
                                    <button class="btn btn-xs pull-right" id="add_group" disabled=""><i class="fa fa-plus"></i></button>
                                </header>

                                <ul id="groups"></ul>
                            </div>

                            <div class="col-lg-5 column">
                                <header>
                                    <h5 class="pull-left">Group Details</h5>
                                </header>

                                <div id="group_details" class='m-t'>
                                    <div id="group_details_instruction" style="display: none;">
                                        <i class="fa fa-arrow-circle-left"></i> Click on group name to load details about group and leaders here
                                    </div>
                                    
                                    <div id="group-details-area"></div>
                                </div>
                            </div>

                            <div id="add-leader-dialog"  class='pos-abt b-a p-sm bg-white' style='display: none; border-radius: 5px; right: 30px; top: 70%; width: 600px; box-shadow: 1px 1px 3px #999;'>
                                <div class='block b-b m-b-sm text-xs font-bold'>Add Leader</div>
                                <form id='add-leader-form' class='form-inline text-center'>
                                    <span class="pull-left thumb-sm">
                                        <img id="add-leader-image" class='img-circle member-profile-image' src="<?php echo $this->Html->url("/img/avatar_default.jpg"); ?>" alt="John said" onerror="App.profileImageError(this);" />
                                    </span>

                                    <span class="pull-left pos-rlt m-l-sm">
                                        <input type="hidden" name="organisation_group_id" id="add-leader-group-id" value="" />
                                        <input type="hidden" name="organisation_member_id" id="add-leader-id" value="" />
                                        <input type='text' id="add-leader-name" class='input-sm form-control input-s' placeholder="Enter Name Or ID" required="" />
                                        <a href="#" class='pos-abt hidden add-leader-remove' style='right: 5px; top: 5px;'><i class='fa fa-times'></i></a>
                                    </span>
                                    
                                    <input type='text' name="role" id="add-leader-role" class='input-sm form-control input-s' placeholder="Role" required="" />

                                    <button type="submit" href='#' class='btn btn-sm btn-success'>Add</button>
                                    <button type="button" href='#' id="cancel-btn" class='btn btn-sm btn-white'>Cancel</button>
                                </form>
                            </div>
                        </section>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<input type="hidden" id="save-changes-url" value="<?php echo $this->Html->url(array('controller' => 'organisation', 'action' => 'org_groups')); ?>" />
<input type="hidden" id="contacts-autocomplete-url" value="<?php echo $this->Html->url(array('controller' => 'organisation', 'action' => 'member_autocomplete_list')); ?>"/>

<script type='text/html'>
    <div class='form'> 

    </div>
</script>

<?php
echo $this->Html->script('plugins/jquery.trocar/jquery.trocar.js');
echo $this->Html->script('app/views/settings/groups.js');
?>